<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>	
<div id="app">
	<router-link id='123' to='/user/123'>User</router-link>
	<router-link sidebar='456' to='/user/456'>SideBar</router-link>
	<div>
		<router-view></router-view>
	</div>
</div>
<script>
	const User = {
		props : ['id'],
		template:`<div>User {{id}}</div>`,
	}
	const SideBar = {
		props :['sidebar'],
		template:`<div>SideBar {{sidebar}}</div>`,
	}
	const router = new VueRouter({
		routes : [
			{ path:'/user/:id' ,component:User ,props:true },
			{
				path:'/user/:id',
				components : {
					default : User,
					sidebar : SideBar,
				},
				props:{default:true,sidebar:false}//如果props被设置为true，route.params将会被设置为组件属性。
			}
		]
	})
	const vm = new Vue({
		el : '#app',
		router,
		data : {}
	})
</script>	
</body>
</html>